<script setup lang="ts">
// 走马灯
import Carousel from '@/components/Carousel/Carousel.vue'
import FlexLeft from '@/components/Echart/flexGlobal/flexLeft.vue'
// 性别占比
import SexPie from '@/components/PermissionsModule/Performance/components/SexPie.vue'
// 全球各区有效会员
import globalValidMembers from '@/components/PermissionsModule/Performance/components/globalValidMembers.vue'
// 全球会员年龄
import globalMemberAges from '@/components/PermissionsModule/Performance/components/globalMemberAges.vue'
// 全球各区核心经销商
import globalCoreDealers from '@/components/PermissionsModule/Performance/components/globalCoreDealers.vue'
// 全球各区会员级别人数
import globalMemberLevelCounts from '@/components/PermissionsModule/Performance/components/globalMemberLevelCounts.vue'
// 全球新用户增涨趋势
import globalNewMemberLine from '@/components/PermissionsModule/Performance/components/globalNewMemberLine.vue'
const components = {
  FlexLeft,
}
// 暴露组件
defineExpose({
  components,
})
</script>

<template>
  <!-- 左侧图表集合 -->
  <FlexLeft />
  <!-- 轮播图内容 -->
  <Carousel class="carousel" :interval="5000">
    <SexPie />
    <globalNewMemberLine />
    <globalValidMembers />
  </Carousel>
  <!-- 轮播图内容 -->
  <Carousel class="carousel" :interval="5000">
    <globalMemberLevelCounts />
    <globalMemberAges />
    <globalCoreDealers />
  </Carousel>
</template>
<style lang="scss" scoped>
.carousel {
  width: 100%;

  :deep(.el-carousel__container) {
    height: 260px;
  }
}
</style>
